import React, { Component, createRef, RefObject } from 'react';
import { Modal, Form, FormInstance, Input, Button, Space, message } from 'antd'
import { IAdmin } from './AdminList';
import { addAdmin } from '../../api/admin';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

interface IProps {
    visible: boolean
    callback: (refresh?:boolean,admin?:IAdmin) => void
}


class AddAdmin extends Component<IProps> {
    formRef: RefObject<FormInstance>
    constructor(porps: IProps, context: any) {
        super(porps, context);
        this.formRef = createRef<FormInstance>()
    }
    cancel = () => {
        this.props.callback()
    }

    addAdmin = (admin: IAdmin) => {
        this.props.callback(true,admin)
        // addAdmin(admin).then(response => {
        //     const { code, msg } = response.data
        //     if (code === 0) {
        //         message.success(msg)
        //     } else {
        //         message.error(msg)
        //     }
        // })
    }
    render() {
        return (
            <>
                <Modal
                    title="添加管理员"
                    visible={this.props.visible}
                    onCancel={this.cancel}
                >

                    <Form
                        ref={this.formRef}
                        {...layout}

                        onFinish={this.addAdmin}
                    >
                        <Form.Item name="name" label='用户名' rules={[{ type: 'string', required: true, message: '用户名不能为空！' }]} >
                            <Input />
                        </Form.Item>
                        <Form.Item name="mobile" label='手机号' rules={[{ type: 'string', required: true, message: '手机号不能为空！' }]} >
                            <Input />
                        </Form.Item>


                        <Form.Item name="email" label='邮箱' rules={[{ type: 'string', required: true, message: '邮箱不能为空！' }]} >
                            <Input />
                        </Form.Item>

                        {/* <Form.Item
                            name='password'
                            rules={[
                                {
                                    type: 'string',
                                    validator: (rule, value) => {
                                        if (value === undefined || value === '') {
                                            return Promise.resolve()
                                        }
                                        if (value.length < 6) {
                                            return Promise.reject('密码长度不可以小于6位');
                                        }
                                        return Promise.resolve()
                                    }
                                }
                            ]}
                            label='密码'>
                            <Input.Password />
                        </Form.Item> */}


                        <Form.Item {...tailLayout}>
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    添加管理员
                                </Button>

                                <Button type="default" htmlType="reset">
                                    重置
                                </Button>
                            </Space>

                        </Form.Item>
                    </Form>

                </Modal>
            </>
        );
    }
}

export default AddAdmin;